* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.yellow {
  color: #fdcb77;
}
.gray {
  color: #e0e0e0;
}

.home {
  width: 100%;
  min-height: 56.25rem;
  background-color: #211c25;
  .title {
    color: #fdcb77;
    font-size: 1.5rem;
    text-align: center;
  }
  .content {
    margin: auto;
    margin-bottom: 3.125rem;
    width: 41.875rem;
    height: 100%;
    padding: 0 1.25rem;
    //   数据展示
    .presentation {
      text-align: center;
      margin: 1.25rem auto;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 7.5rem;
      background-color: #332f38;
      border-radius: 0.625rem;
      p {
        margin: 0.625rem;
      }
    }
    // 活动规则
    .rule {
      margin: 1.25rem auto;
      width: 100%;
      border: 0.125rem solid #fdcb77;
      border-radius: 0.625rem;
      background-color: #332f38;
      padding: 0.625rem 1.25rem;
      p {
        display: flex;
        margin: 0.625rem;
        color: #e0e0e0;

        div {
          line-height: 0.8rem;
        }
      }
    }
    // 排行
    .rank {
      width: 100%;
      height: 2.8125rem;
      display: flex;
      justify-content: space-between;
      border: 0.125rem solid #fdcb77;
      p {
        flex: 1;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #e0e0e0;
      }
      .active {
        color: #7b492b;
        background-image: linear-gradient(to bottom, #f7d695, #ceab7b);
      }
    }
    // 分类
    .classify {
      margin-top: 1.25rem;
      width: 100%;
      height: 6.25rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 0.625rem;
      p {
        background-image: linear-gradient(to bottom, #f7d695, #ceab7b);
        color: #7b492b;
        width: 100%;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
      }
      .activeClassify {
        background-image: linear-gradient(to bottom, #ffffff, #cccccc);
        color: #000;
        font-weight: bold;
      }
    }
    //搜索
    .search {
      margin-top: 1.25rem;
      border: 0.0625rem solid #fdcb77;
      width: 100%;
      height: 3.125rem;
      display: flex;
      justify-content: center;
      align-items: center;
      input {
        width: 73%;
        height: 2.8125rem;
        border: none;
        padding-left: 1.25rem;
        font-size: 1rem;
        color: #ffffff;
        background-color: #211c25;
      }
      button {
        width: 27%;
        height: 3.125rem;
        background-image: linear-gradient(to bottom, #f7d695, #ceab7b);
        color: #7b492b;
        font-weight: bold;
        border: none;
      }
    }
    // 关键字提示
    .searchval {
      text-align: center;
      color: #bbb8b5;
      line-height: 3.125rem;
      height: 3.125rem;
      width: 100%;
    }
    //选手列表
    .list {
      margin-top: 1.25rem;
      text-align: center;
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .rv-list__finished {
        width: 100vw;
      }
      .list-item {
        margin-top: 0.625rem;
        background-color: #332f38;
        border: 0.125rem solid #f8c588;
        // max-width: 48%;
        width: 48%;
        height: 100%;
        position: relative;
        .avtor {
          margin: auto;
          min-width: 150px;
          min-height: 100px;
        }
        .mark {
          width: 30%;
          height: 1.75rem;
          line-height: 1.75rem;
          background-color: #898785;
          top: 0;
          border-radius: 0.1875rem;
          position: absolute;
          color: #fff;
          border: 0.0625rem solid #fff;
          z-index: 999;
        }
        img {
          width: 98%;
          height: 100%;
        }
        h3 {
          color: #ffffff;
        }
        .named {
          font-size: 0.875rem;
          margin: 0.625rem;
          color: #bbb8b5;
        }
        .vote {
          color: #fff;
          background-color: #504d54;
        }
        button {
          width: 98%;
          height: 2.5rem;
          background-image: linear-gradient(to bottom, #f7d695, #ceab7b);
          color: #7b492b;
          font-weight: bold;
          border: none;
        }
      }
    }
  }
}

/* 当设备为屏幕且屏幕宽度小于或等于48rem时 */
@media screen and (max-width: 41.875rem) {
  .home {
    width: 100%;
    min-height: 56.25rem;
    background-color: #211c25;
    .title {
      color: #fdcb77;
      font-size: 1.5rem;
      text-align: center;
      margin-top: 1.25rem;
    }
    .content {
      width: 100%;
      height: 100%;
      padding: 0 1.25rem;
      margin-bottom: 3.125rem;
      //   数据展示
      .presentation {
        text-align: center;
        margin: 1.25rem auto;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 7.5rem;
        background-color: #332f38;
        border-radius: 0.625rem;
        p {
          margin: 0.625rem;
        }
      }
      //   活动规则
      .rule {
        margin: 1.25rem auto;
        width: 100%;
        border: 0.125rem solid #fdcb77;
        border-radius: 0.625rem;
        background-color: #332f38;
        padding: 0.625rem 1.25rem;
        p {
          display: flex;
          margin: 0.625rem;
          color: #e0e0e0;

          div {
            margin-left: 0.3rem;
            line-height: 0.9rem;
          }
        }
      }
      //   排行
      .rank {
        width: 100%;
        height: 2.8125rem;
        display: flex;
        justify-content: space-between;
        border: 0.125rem solid #fdcb77;
        p {
          flex: 1;
          height: 2.5rem;
          line-height: 2.5rem;
          text-align: center;
          color: #e0e0e0;
        }
        .active {
          color: #7b492b;
          background-image: linear-gradient(to bottom, #f7d695, #ceab7b);
        }
      }

      //   搜索
      .search {
        margin-top: 1.25rem;
        border: 0.0625rem solid #fdcb77;
        width: 100%;
        height: 3.125rem;
        display: flex;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        input {
          width: 73%;
          height: 2.8125rem;
          border: none;
          padding-left: 1.25rem;
          font-size: 1rem;
          color: #ffffff;
          background-color: #211c25;
        }
        button {
          width: 27%;
          height: 2.8125rem;
          box-sizing: border-box;
          background-image: linear-gradient(to bottom, #f7d695, #ceab7b);
          color: #7b492b;
          font-weight: bold;
          border: none;
        }
      }
      // 关键字提示
      .searchval {
        text-align: center;
        color: #bbb8b5;
        line-height: 3.125rem;
        height: 3.125rem;
        width: 100%;
      }
      //选手列表
      .list {
        margin-top: 1.25rem;
        text-align: center;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .rv-list__finished {
          width: 100vw;
        }
        .list-item {
          margin-top: 0.625rem;
          background-color: #332f38;
          border: 0.125rem solid #f8c588;
          width: 48%;
          height: 100%;
          position: relative;
          .avtor {
            margin: auto;
            min-width: 120px;
            min-height: 100px;
          }
          .mark {
            width: 30%;
            height: 1.75rem;
            line-height: 1.75rem;
            background-color: #898785;
            top: 0;
            border-radius: 0.1875rem;
            position: absolute;
            color: #fff;
            border: 0.0625rem solid #fff;
            z-index: 999;
          }
          img {
            width: 100%;
            height: 100%;
          }
          h3 {
            color: #ffffff;
          }
          .named {
            font-size: 0.875rem;
            margin: 0.625rem;
            color: #bbb8b5;
          }
          .vote {
            color: #fff;
            background-color: #504d54;
          }
          button {
            width: 100%;
            height: 2.5rem;
            background-image: linear-gradient(to bottom, #f7d695, #ceab7b);
            color: #7b492b;
            font-weight: bold;
            border: none;
          }
        }
      }
    }
  }
}
